import { Form, Input, message, Modal } from 'antd';

import React from 'react';
import type { TableListItem } from '../data';
import type { SpaceOwnerInfo } from '../service';
import { queryZoneList, updateSpaceOwnerInfo } from '../service';
import { SUCCESS_CODE } from '@/utils/request';
import RemoteSelect from '@/components/RemoteSelect';

interface SpaceOwnerUpdateFormProps {

  onSubmit: (success: boolean) => void;
  onCancel: (flag?: boolean) => void;
  modalVisible: boolean;
  item: TableListItem;
}

const formItemLayout = {
  labelCol: {
    xs: { span: 6 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 18 },
    sm: { span: 18 },
  },
};

const SpaceOwnerUpdateForm: React.FC<SpaceOwnerUpdateFormProps> = props => {
  const [ form ] = Form.useForm();
  const { onCancel: handleAddModalVisible } = props;

  const onModalOk = async () => {
    const hide = message.loading('正在修改');
    const fieldsValue = (await form.validateFields()) as SpaceOwnerInfo;
    fieldsValue.id = props.item.id;
    try {
      const res = await updateSpaceOwnerInfo(fieldsValue);
      hide();
      if (res.code === SUCCESS_CODE) {
        message.success('操作成功');
      } else {
        message.error(`操作失败！${ res.message }`);
      }

      props.onSubmit(true);

      handleAddModalVisible(false);
    } catch (error) {
      hide();
      message.error('添加失败！未知的错误！');
      handleAddModalVisible(false);
    }
  };

  form.setFieldsValue({
    ...props.item,
    deviceNo: props.item?.deviceNo || props.item?.device?.deviceName,
    name: props.item?.ownerName,
    phone: props.item?.ownerPhone,
    idCard: props.item?.ownerIdCard,
  });

  return (
    <Modal
      title='修改车位信息'
      visible={ props.modalVisible }
      destroyOnClose
      onOk={ () => onModalOk() }
      onCancel={ () => handleAddModalVisible(false) }
      afterClose={ () => handleAddModalVisible() }
      okText='确定'
      cancelText='取消'
    >
      <Form { ...formItemLayout } form={ form }>
        <Form.Item name='spaceName' label='车位号' rules={ [ { required: true, message: '必填' } ] }>
          <Input disabled />
        </Form.Item>
        <Form.Item name='zone' label='停车区域' rules={ [ { required: true, message: '必填' } ] }>
          <RemoteSelect
            disabled
            getPopupContainer={ triggerNode => triggerNode.parentElement } // 保证选择菜单不会随着页面滚动
            fieldNames={ { key: 'id', value: 'id', label: 'name' } }
            request={ search => queryZoneList({ name: search }) }
          />
        </Form.Item>
        <Form.Item name='deviceNo' label='绑定设备' rules={ [ { required: true, message: '必填' } ] }>
          <Input />
        </Form.Item>

        {/*<Form.Item name='owner' label='泊位所有人'>*/ }
        {/*  <RemoteSelect*/ }
        {/*    getPopupContainer={ triggerNode => triggerNode.parentElement } // 保证选择菜单不会随着页面滚动*/ }
        {/*    fieldNames={ { key: 'id', value: 'id', label: 'name' } }*/ }
        {/*    request={ search => findMatchOwnerList({ name: search, type: 1 }) }*/ }
        {/*  />*/ }
        {/*</Form.Item>*/ }

      </Form>
    </Modal>
  );
};

export default SpaceOwnerUpdateForm;
